<section class="content-header">
    <h1>
        CT统计分析
        <!-- <small>Control panel</small> -->
        <div class="btn-group pull-right">
            <button type="button" class="btn btn-default btn-sm" (click)="exportData()">
                数据导出
            </button>
        </div>
    </h1>
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-3 col-md-push-9">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">查询区域</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="form-group">
                        <label for="DateTimeRange">时间</label>
                        <input type="text" class="form-control pull-right" id="DateTimeRange" placeholder="请选择日期" />
                    </div>
                    <div class="form-group">
                        <label>区域</label>
                        <dx-select-box #subArea style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="subAreaItems" displayExpr="subArea"
                            [(selectedItem)]="subAreaSelected" (onValueChanged)="onSubAreaSelectedChange($event)" [value]="subAreaItems[0]"
                            [searchEnabled]="true">
                        </dx-select-box>
                    </div>
                    <div class="form-group">
                        <label>设备</label>
                        <dx-select-box style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="equipemntItems" displayExpr="equipment"
                            [(selectedItem)]="equipmentSelected" [value]="equipmentSelected" [searchEnabled]="true">
                        </dx-select-box>
                    </div>
                    <!-- <div class="form-group">
                        <label>班次</label>
                        <dx-select-box #shift style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="shiftItems" displayExpr="shiftName"
                            [(selectedItem)]="shiftSelected" [value]="shiftItems[0]" [searchEnabled]="true">
                        </dx-select-box>
                    </div> -->
                    <div class="form-group">
                        <label>时间宽度</label>
                        <dx-number-box format="#0秒" [min]="1" [max]="100" style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [(value)]="timeLength"
                            [step]="1"></dx-number-box>
                    </div>
                    <div class="form-group">
                        <label>最小值--最大值</label>
                        <div style="text-align:center">
                            <dx-number-box class="pull-left" [min]="0" [max]="1000" format="#0秒" style="width:40%;height:35px;margin-bottom:5px;border-radius: 0px"
                                [(value)]="minValue" [step]="1"></dx-number-box>--
                            <dx-number-box class="pull-right" [min]="1" [max]="2000" format="#0秒" style="width:40%;height:35px;margin-bottom:5px;border-radius: 0px"
                                [(value)]="maxValue" [step]="1"></dx-number-box>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>筛选百分比</label>
                        <dx-number-box format="#0 %" [min]="0" [max]="100" style="width:100%;height:35px;margin-bottom:5px;border-radius: 0px" [(value)]="percent"
                            [step]="0.01"></dx-number-box>
                    </div>
                </div>
                <div class="box-footer">
                    <button type="button" class="btn btn-primary" (click)="getReportData()"> 查 询 </button>
                </div>
            </div>
        </div>
        <div class="col-md-9 col-md-pull-3">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">CT统计查询</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <dx-data-grid [dataSource]="ctsList" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true" 
                    [rowAlternationEnabled]="true" (onExporting)="onExporting($event)" [columnMinWidth]="50" [columnAutoWidth]="true">
                        <dxo-paging [pageSize]="10"></dxo-paging>
                        <dxo-export [enabled]="true" fileName="CT统计查询" [allowExportSelectedData]="false"></dxo-export>
                        <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
                        </dxo-pager>
                        <dxi-column dataField="subArea" caption="区域">
                        </dxi-column>
                        <dxi-column dataField="equipment" caption="设备">
                        </dxi-column>
                        <dxi-column dataField="shiftDay" caption="工作日">
                        </dxi-column>
                        <dxi-column dataField="shiftId" caption="班次">
                        </dxi-column>
                        <dxi-column dataField="logTime" caption="加工结束时间(秒)">
                        </dxi-column>
                        <dxi-column dataField="dLastCt" caption="CT加工时间(秒)">
                        </dxi-column>
                        <dxi-column dataField="dLastBt" caption="BT堵料时间(秒)">
                        </dxi-column>
                        <dxi-column dataField="dLastSt" caption="ST待料时间(秒)">
                        </dxi-column>
                        <dxi-column dataField="processTime" caption="非故障时间(秒)">
                        </dxi-column>
                        <dxi-column dataField="dcompletedTime" caption="循环间隔时间(秒)">
                        </dxi-column>
                        <dxi-column dataField="faultOrRestTime" caption="异常损失时间(秒)">
                        </dxi-column>
                    </dx-data-grid>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">概率分布图(散点图)</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-9">
                            <div class="chart">
                                <div echarts [options]="chartOption" (chartInit)="onChartInit('概率分布图(散点图)',$event)" [loading]="showloading" class="demo-chart"
                                    style="height:300px;"></div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <ul class="products-list product-list-in-box">
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">工位
                                            <span class="label label-success pull-right" style="width:120px; font-size:18px">{{statObject.equipment}}</span>
                                        </a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">预设CT(秒)
                                            <span class="label label-success pull-right" style="width:120px; font-size:18px">{{statObject.ratect}}</span>
                                        </a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">筛选百分比(%)
                                            <span class="label label-success pull-right" style="width:120px; font-size:18px">{{statObject.percent}}</span>
                                        </a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">最大值(秒)
                                            <span class="label label-success pull-right" style="width:120px; font-size:18px">{{statObject.max}}</span>
                                        </a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">最小值(秒)
                                            <span class="label label-success pull-right" style="width:120px; font-size:18px">{{statObject.min}}</span>
                                        </a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">平均值(秒)
                                            <span class="label label-success pull-right" style="width:120px; font-size:18px">{{statObject.avg}}</span>
                                        </a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">标准差
                                            <span class="label label-success pull-right" style="width:120px; font-size:18px">{{statObject.stdev}}</span>
                                        </a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">有效样本数
                                            <span class="label label-success pull-right" style="width:120px; font-size:18px">{{statObject.count}}</span>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">概率分布图(柱状图)</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-9">
                            <div class="chart">
                                <div echarts [options]="chartLineOption" [loading]="showloading" (chartInit)="onChartInit('概率分布图(柱状图)',$event)" class="demo-chart"
                                    style="height:300px;"></div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <ul class="products-list product-list-in-box">
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">工位
                                            <span class="label label-success pull-right" style="width:120px; font-size:18px">{{statObject.equipment}}</span>
                                        </a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">预设CT
                                            <span class="label label-success pull-right" style="width:120px; font-size:18px">{{statObject.ratect}}</span>
                                        </a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">筛选百分比
                                            <span class="label label-success pull-right" style="width:120px; font-size:18px">{{statObject.percent}}</span>
                                        </a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">最大值
                                            <span class="label label-success pull-right" style="width:120px; font-size:18px">{{statObject.max}}</span>
                                        </a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">最小值
                                            <span class="label label-success pull-right" style="width:120px; font-size:18px">{{statObject.min}}</span>
                                        </a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">平均值
                                            <span class="label label-success pull-right" style="width:120px; font-size:18px">{{statObject.avg}}</span>
                                        </a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">标准差
                                            <span class="label label-success pull-right" style="width:120px; font-size:18px">{{statObject.stdev}}</span>
                                        </a>
                                    </div>
                                </li>
                                <li class="item">
                                    <div style="margin-left:0px" class="product-info">
                                        <a href="javascript:return false" class="product-title">有效样本数
                                            <span class="label label-success pull-right" style="width:120px; font-size:18px">{{statObject.count}}</span>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>